import React from 'react';

const LoadingFallback = ({ message = "Loading 3D Scene..." }) => {
  return (
    <div style={{
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      gap: '20px',
      color: 'white',
      fontFamily: 'Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
      zIndex: 100
    }}>
      {/* Animated drone icon */}
      <div style={{
        fontSize: '3em',
        animation: 'float 2s ease-in-out infinite'
      }}>
        🚁
      </div>

      {/* Loading text */}
      <div style={{
        fontSize: '1.2em',
        fontWeight: '500',
        textAlign: 'center'
      }}>
        {message}
      </div>

      {/* Loading bar */}
      <div style={{
        width: '200px',
        height: '4px',
        background: 'rgba(255, 255, 255, 0.2)',
        borderRadius: '2px',
        overflow: 'hidden'
      }}>
        <div style={{
          width: '100%',
          height: '100%',
          background: 'linear-gradient(90deg, #3498db, #2ecc71, #e74c3c, #f39c12)',
          backgroundSize: '200% 100%',
          animation: 'loadingBar 2s linear infinite'
        }} />
      </div>

      {/* Loading dots */}
      <div style={{
        display: 'flex',
        gap: '8px'
      }}>
        {[0, 1, 2].map((i) => (
          <div
            key={i}
            style={{
              width: '8px',
              height: '8px',
              borderRadius: '50%',
              background: '#3498db',
              animation: `loadingDot 1.4s ease-in-out infinite both`,
              animationDelay: `${i * 0.16}s`
            }}
          />
        ))}
      </div>

    </div>
  );
};

export default LoadingFallback;
